{extend name="public/base"}
{block name="title"}{$config['title']} - {$config['description']}{/block}
{block name="toptip"}主页{/block}
{block name="head"}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/dropzone@5.7.1/dist/dropzone.min.css">
{/block}
{block name="body"}
<form class="send_post">
    <div class="card">
        {if $user}
        <div class="card-body row no-gutters">
            <div class="mr-3">
                <img class="rounded-circle" src="{if $user}{$user.avatar_url}{else}__IMG__/logo.svg{/if}" width="48" height="48">
            </div>
            <div class="col">
                <div class="form-group">
                    <textarea class="form-control input_post" rows="1" placeholder="有什么新鲜事想告诉大家？" name="text" required></textarea>
                    <div class="img-dropzone dropzone"></div>
                    <div class="row no-gutters border-top func_area">
                        <div class="kind flex-fill mt-2 mr-3">
                            <a href="javascript:void(0);"><i class="la la-smile"></i></a>
                            <a href="javascript:void(0);" onclick="uploadImg()"><i class="la la-image"></i></a>
                            <a href="javascript:void(0);"><i class="la la-link"></i></a>
                            <a href="javascript:void(0);"><i class="la la-hashtag"></i></a>
                        </div>
                        <div class="flex-row-reverse mt-2">
                            <button type="submit" class="btn btn-primary rounded-pill">推文</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {else}
        <div class="shade"><img src="https://ae01.alicdn.com/kf/Hd20987e65e264e49b7262cc3648f8c24h.jpg"></div>
        {/if}
    </div>
</form>
{if $user}
<div class="line"></div>
{/if}
<div id="feed_list">
    {include file="post/data" /}
</div>
{/block}
{block name="foot"}
<script src="https://cdn.jsdelivr.net/npm/dropzone@5.7.1/dist/dropzone.min.js"></script>
<script>
    wbbs.picctrl();
    wbbs.bindLoadList();
    Dropzone.autoDiscover = false;
    var dropzone = new Dropzone('.img-dropzone', {
        url: '{:url("/upload/upload")}',
        type: 'POST',
        maxFiles: 9,
        acceptedFiles: "image/jpg,image/jpeg,image/png,image/gif",
        addRemoveLinks: true,
        success: function (file, response) {
            if (response.code != 1) {
                alert(response.msg);
                this.removeFile(file);
            }
        }
    });
    /* 上传图片 */
    function uploadImg() {
        dropzone.clickableElements[0].click()
    }
    /* 使用 */
    $('.input_post').autoHeight();
    $('.send_post').submit(function () {
        var form_data = $(this).serialize();
        var image = [];
        for (var i = 0; i < dropzone.files.length; i++) {
            if (dropzone.files[i].status == "success") {
                var json = JSON.parse(dropzone.files[i].xhr.response);
                if (json.data.id) {
                    image.push(json.data.id);
                }
            }
        }
        if (image.length != 0) {
            form_data += "&image=" + image.join('|');
        }
        $.ajax({
            url: '{:url("/post/add")}',
            type: 'POST',
            data: form_data,
            success: function (res) {
                if (res.code == 1) {
                    location.href = location.href;
                } else {
                    alert(res.msg);
                }
            }
        });
        return false;
    });
</script>
{/block}